<template>
    <div class="homeMain">
        <div class="skin-box" @click="openHomePageLayout">
            <div class="skin-box-info">
                <Icon type="ios-browsers" size="18" color="#fff" />
                <span>布局设置</span>
            </div>
        </div>
        <div>
            <Row :gutter="16">
                <span v-for="(comp, componentGroupIndex) in currentComponentGroup" :key="componentGroupIndex">

                    <Col :span="comp.spanLength" v-if="comp.code === '待办事项'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <backlog-module></backlog-module>
                        </div>
                    </Col>

                    <Col :span="comp.spanLength" v-if="comp.code === '消息中心'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <message-center></message-center>
                        </div>
                    </Col>

                    <Col :span="comp.spanLength" v-if="comp.code === '流程审批'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <mission-module></mission-module>
                        </div>
                    </Col>


                    <Col :span="comp.spanLength" v-if="comp.code === '我的报表'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <sale-funnel ref="mySaleFunnel"></sale-funnel>
                        </div>
                    </Col>


                    <Col :span="comp.spanLength" v-if="comp.code === '客户列表'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <home-customer @addCustomer="addCustomer"></home-customer>
                        </div>
                    </Col>

                    <Col :span="comp.spanLength" v-if="comp.code === '联系人'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <home-contract></home-contract>
                        </div>
                    </Col>

                    <Col :span="comp.spanLength" v-if="comp.code === '我的店铺'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <shop-module></shop-module>
                        </div>
                    </Col>

                    <Col :span="comp.spanLength" v-if="comp.code === '客情维系情况'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <statistics-customer-retention></statistics-customer-retention>
                        </div>
                    </Col>

                    <Col :span="comp.spanLength" v-if="comp.code === '销售业绩情况'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <statistics-contract-amount></statistics-contract-amount>
                        </div>
                    </Col>

                    <!-- 日程管理 -->
                    <Col :span="comp.spanLength" v-if="comp.code === '日程管理'">
                        <div class="components-box">
                            <!-- 组件摆放 -->
                            <schedule-management></schedule-management>
                        </div>
                    </Col>
                </span>

            </Row>
        </div>

        <!--<Modal :draggable="true" v-model="procedureModal" @on-cancel="closepProcedureModal" fullscreen :mask-closable="false"-->
               <!--title="设置向导">-->
            <!--<div style="height:100%;">-->
                <!--<department-maintenance v-show="DMShow"></department-maintenance>-->
                <!--<job-list v-show="JBShow"></job-list>-->
            <!--</div>-->

            <!--<div slot="footer">-->
                <!--<Button @click="beforeStep">上一步</Button>-->
                <!--<Button @click="nextStep">下一步</Button>-->
            <!--</div>-->
        <!--</Modal>-->

        <Modal :draggable="true"
            @on-ok="subHomePageLayout"
            @on-cancel="cancelHomePageLayout"
            v-model="homePageLayout"
            :mask-closable="false"
            title="首页布局">
            <div style="color:#2d8cf0;padding-right:65px;" class="ta-r">温馨提示:已选模块通过拖动排序</div>
            <transfer-drag
                :data="componentGroup"
                :target-keys="targetKeys1"
                :render-format="render1"
                @on-change="handleChange1"></transfer-drag>
        </Modal>

        <Modal :draggable="true"
            @on-ok="subCurrentLayout"
            @on-cancel="cancelCurrentLayout"
            v-model="currentLayout"
            :mask-closable="false"
            :title="homePageLayoutTitle">
            <div style="color:#2d8cf0;padding-right:65px;" class="ta-r">温馨提示:已选模块通过拖动排序</div>
            <transfer-drag
                :data="currentLayoutComponentGroup"
                :target-keys="currentLayoutTargetKeys"
                :render-format="currentRender"
                @on-change="currentHhandleChange"></transfer-drag>
        </Modal>


    </div>
</template>

<script>
    // import sidebarMenu from '../main-components/shrinkable-menu/components/sidebarMenu.vue';
    // import departmentMaintenance from '@/pages/components/departmentMaintenance/departmentMaintenance';
    import jobList from '@/pages/components/jobList/jobList';
    import backlogModule from '@/pages/components/backlogModule/backlogModule';
    import missionModule from '@/pages/components/missionModule/missionModule';
    import saleFunnel from '@/pages/components/saleFunnel/saleFunnel';
    import shopModule from '@/pages/components/shopModule/shopModule';
    import TransferDrag from '../components/transfer-drag';
    import homeCustomer from '@/customer/pages/components/homeCustomer';
    import homeContract from '@/customer/pages/components/homeContract';
    import messageCenter from '@/pages/components/messageCenter/messageCenter';
    import statisticsCustomerRetention from '@/report/pages/statisticsComponents/statisticsCustomerRetention'; // 组件
    import statisticsContractAmount from '@/report/pages/statisticsComponents/statisticsContractAmount'; // 组件
    import scheduleManagement from '@/pages/components/scheduleManagement/scheduleManagement'; // 日程管理

    export default {
        inject: ['reload'],
        data () {
            return {
                horizontal: 'horizontal',
                menuTheme: 'light',
                procedureModal: false,
                showIndex: -1,
                DMShow: true,
                JBShow: false,
                // 我的最近使用列表
                myUseHistoryList: [],
                // 我的桌面列表
                myResourceList: [],
                isShowMyUseHistoryList: true,
                componentGroup: [],
                currentComponentGroup: [],
                targetKeys1: [],
                homePageLayoutTitle: '',
                homePageLayout: false,
                postObj: {
                    parentId: null,
                    resourceId: []
                },
                currentLayout: false,
                currentLayoutComponentGroup: [],
                currentLayoutTargetKeys: []
            };
        },
        components: {
            TransferDrag,
            // sidebarMenu,
            // departmentMaintenance,
            jobList,
            backlogModule,
            missionModule,
            saleFunnel,
            shopModule,
            homeCustomer,
            homeContract,
            messageCenter,
            statisticsCustomerRetention,
            statisticsContractAmount,
            scheduleManagement
        },
        computed: {},
        mounted () {
            // 获取数据字典信息
            depot.get({
                url: this.URL.DATA.FIND_ALL,
                cb: data => {
                    if (data.code === 0) {
                        localStorage.setItem('dictionary', JSON.stringify(data.data));
                    } else {
                        this.$Message.error(data.message);
                    }
                }
            });

            var companyInfo = localStorage.getItem("company");
            if (companyInfo && !JSON.parse(companyInfo).isGuide) {
                console.log(companyInfo,'companyInfocompanyInfo')
                this.$router.push({
                    path: '/guidePage'
                });
            }

            this.changeIndex(0);
            // 获取我的最近使用记录
            // this.findMyUseHistoryList();
            // 获取我的桌面
            // this.findMyResourceList();
            // 获取当前布局
            this.findUserModuleList();
            // 获取所有布局
            this.findUserModule();
        },
        methods: {
            addCustomer () {
                // 新增客户后刷新漏斗组件的查询方法
                let mySaleFunnel = this.$refs.mySaleFunnel[0];
                if (mySaleFunnel) {
                    mySaleFunnel.getFindAllChildrenUserListByUserIdForSalesReport();
                }
            },
            changeIndex (index) {
                this.showIndex = index;
                if (index === 0) {
                    this.DMShow = true;
                    this.JBShow = false;
                } else if (index === 1) {
                    this.DMShow = false;
                    this.JBShow = true;
                }
            },
            beforeStep () {
                if (this.showIndex === 1) {
                    this.changeIndex(this.showIndex - 1);
                }
            },
            nextStep () {
                if (this.showIndex === 0) {
                    this.changeIndex(this.showIndex + 1);
                }
            },
            closepProcedureModal () {
                this.procedureModal = false;
                this.DMShow = false;
                this.JBShow = false;
            },
            handleChange (resource) {
                if (!resource) {
                    return;
                }
                // console.log(resource.link, 11);
                //   let willpush = true;
                //   if (this.beforePush !== undefined) {
                //     if (!this.beforePush(name)) {
                //       willpush = false;
                //     }
                //   }
                //   if (willpush) {
                this.saveMyUseHistory(resource.id);
                this.$router.push({
                    path: resource.link
                });
                //   }
            },
            // 保存操作记录
            saveMyUseHistory (resourceId) {
                if (!resourceId) {
                    return;
                }
                depot.post({
                    url: this.URL.USER.SAVE_MY_USE_HISTORY,
                    data: resourceId,
                    cb: (data) => {
                    }
                });
            },
            // 获取最近使用记录
            findMyUseHistoryList () {
                depot.get({
                    url: this.URL.USER.FIND_MY_USE_HISTORY_LIST,
                    cb: data => {
                        if (data.code === 0) {
                            this.myUseHistoryList = data.data;
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('获取最近使用记录失败');
                    }
                });
            },
            // 获取我的桌面
            findMyResourceList () {
                depot.get({
                    url: this.URL.USER.FIND_MY_RESOURCE_LIST,
                    cb: data => {
                        if (data.code === 0) {
                            this.myResourceList = data.data;
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('获取我的桌面失败');
                    }
                });
            },
            // 跳转到我的桌面按钮
            goToMyDesktop () {
                this.$router.push({
                    path: '/home/myDesktop'
                });
            },
            // 获取当前布局
            findUserModuleList () {
                depot.get({
                    url: this.URL.USER.FIND_USER_MODULE_LIST,
                    config: {
                        params: {
                            type: 'MODULE_HOME'
                        }
                    },
                    cb: data => {
                        if (data.code === 0) {
                            let arr = [];
                            let arr2 = [];
                            data.data.forEach((item, index) => {
                                let obj = {
                                    id: null,
                                    key: null,
                                    code: '',
                                    name: '',
                                    label: '',
                                    // children: [],
                                    resourceId: null,
                                    spanLength: null
                                };
                                obj.key = item.resource.id.toString();
                                obj.id = item.resource.id;
                                obj.code = item.resource.code;
                                obj.name = item.resource.name;
                                obj.label = item.resource.name;
                                // obj.children = [];
                                obj.resourceId = item.resourceId;
                                obj.spanLength = item.resource.spanLength;
                                // obj.waitParentId = item.id;
                                // item.children.forEach((item2, index2) => {
                                //     let obj2 = {
                                //         id: null,
                                //         key: null,
                                //         code: '',
                                //         name: '',
                                //         label: ''
                                //     };
                                //     obj2.key = item2.resource.id.toString();
                                //     obj2.id = item2.resource.id;
                                //     obj2.code = item2.resource.code;
                                //     obj2.name = item2.resource.name;
                                //     obj2.label = item2.resource.name;
                                //     obj.children.push(obj2);
                                // });
                                arr.push(obj);
                                arr2.push(obj.key);
                            });
                            this.currentComponentGroup = JSON.parse(JSON.stringify(arr));
                            this.targetKeys1 = JSON.parse(JSON.stringify(arr2));
                            console.log(this.currentComponentGroup, 998);
                            // console.log(this.targetKeys1, 33);
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('查找当前菜单失败');
                    }
                });
            },
            // 获取所有布局
            findUserModule () {
                depot.get({
                    url: this.URL.USER.FIND_USER_MODULE,
                    config: {
                        params: {
                            type: 'MODULE_HOME'
                        }
                    },
                    cb: data => {
                        if (data.code === 0) {
                            console.log(data.data, '0000200');
                            let arr = [];
                            data.data.forEach((item, index) => {
                                let obj = {
                                    id: null,
                                    key: null,
                                    code: '',
                                    name: '',
                                    label: '',
                                    spanLength: null
                                };
                                obj.key = item.id.toString();
                                obj.id = item.id;
                                obj.code = item.code;
                                obj.name = item.name;
                                obj.label = item.name;
                                obj.spanLength = item.spanLength;
                                // obj.children = [];
                                // item.children.forEach((item2, index2) => {
                                //     let obj2 = {
                                //         id: null,
                                //         key: null,
                                //         code: '',
                                //         name: '',
                                //         label: ''
                                //     };
                                //     obj2.key = item2.id.toString();
                                //     obj2.id = item2.id;
                                //     obj2.code = item2.code;
                                //     obj2.name = item2.name;
                                //     obj2.label = item2.name;
                                //     obj.children.push(obj2);
                                // });
                                arr.push(obj);
                            });
                            this.componentGroup = JSON.parse(JSON.stringify(arr));
                            console.log(this.componentGroup, 997);
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('查找用户菜单失败');
                    }
                });
            },
            // 打开首页布局
            openHomePageLayout () {
                this.postObj.parentId = null;
                this.homePageLayout = true;
                this.homePageLayoutTitle = '首页布局';
            },
            // 提交穿梭框方法
            subHomePageLayout () {
                let datas = {};
                this.postObj.resourceId = this.targetKeys1;
                datas = this.postObj;
                datas.resourceType = 'MODULE_HOME';
                console.log(datas, 'post');
                depot.post({
                    url: this.URL.USER.SAVE_USER_MODULE,
                    data: datas,
                    cb: data => {
                        if (data.code === 0) {
                            this.homePageLayout = false;
                            this.findUserModuleList();
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('查找当前菜单失败');
                    }
                });
            },
            // 取消首页布局
            cancelHomePageLayout () {
                this.homePageLayout = false;
            },
            render1 (item) {
                return item.label;
            },
            handleChange1 (newTargetKeys, direction, moveKeys) {
                // console.log(newTargetKeys, 1);
                // console.log(direction, 2);
                // console.log(moveKeys, 3);
                this.targetKeys1 = newTargetKeys;
            },

            // 打开当前布局
            openCurrentLayout (resourceId) {
                this.currentLayoutComponentGroup = [];
                let arr = [];
                this.currentLayout = true;
                this.componentGroup.forEach((item, index) => {
                    if (resourceId === item.id) {
                        this.homePageLayoutTitle = item.name + '布局';

                        item.children.forEach((item2, index2) => {
                            let obj = {
                                id: null,
                                key: null,
                                code: '',
                                name: '',
                                label: ''
                            };
                            obj.key = item2.id.toString();
                            obj.id = item2.id;
                            obj.code = item2.code;
                            obj.name = item2.name;
                            obj.label = item2.name;
                            arr.push(obj);
                        });
                    }
                });
                this.currentLayoutComponentGroup = JSON.parse(JSON.stringify(arr));
                // console.log(this.currentLayoutComponentGroup, 88);

                this.currentLayoutTargetKeys = [];
                let arr2 = [];
                this.currentComponentGroup.forEach((item, index) => {
                    if (resourceId === item.id) {
                        this.postObj.parentId = item.waitParentId;
                        item.children.forEach((item2, index2) => {
                            let obj2 = {
                                id: null,
                                key: null,
                                code: '',
                                name: '',
                                label: ''
                            };
                            obj2.key = item2.id.toString();
                            obj2.id = item2.id;
                            obj2.code = item2.code;
                            obj2.name = item2.name;
                            obj2.label = item2.name;
                            arr2.push(obj2.key);
                        });
                    }
                });
                this.currentLayoutTargetKeys = JSON.parse(JSON.stringify(arr2));
                // console.log(this.currentLayoutTargetKeys, 99);
            },
            subCurrentLayout () {
                let datas = {};
                this.postObj.resourceId = this.currentLayoutTargetKeys;
                datas = this.postObj;
                datas.resourceType = 'MODULE_HOME';
                depot.post({
                    url: this.URL.USER.SAVE_USER_MODULE,
                    data: datas,
                    cb: data => {
                        if (data.code === 0) {
                            this.homePageLayout = false;
                            this.findUserModuleList();
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.$Message.error('查找当前菜单失败');
                    }
                });
            },
            cancelCurrentLayout () {
                this.currentLayout = false;
            },
            currentRender (item) {
                return item.label;
            },
            currentHhandleChange (newTargetKeys, direction, moveKeys) {
                // console.log(newTargetKeys, 1);
                // console.log(direction, 2);
                // console.log(moveKeys, 3);
                this.currentLayoutTargetKeys = newTargetKeys;
            }
        },
        beforeRouteEnter (to, from, next) {
            // console.log(to, from, 111);
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当钩子执行前，组件实例还没被创建
            next(vm => {
                // 通过 `vm` 访问组件实例
                if (from.name === 'customerDetails') {
                    vm.reload();
                }
            });
        }
    };
</script>


<style lang="less">
    .homeMain {
        position: relative;
        .skin-box{
            z-index: 2;
            position: absolute;
            right:-10px;
            top: 0;
            transform: translate(0, -50%);
            width: 100px;
            height: 36px;
            overflow: hidden;
            cursor: pointer;
            .skin-box-info{
                background-color: rgba(0, 0, 0, .6);
                position: absolute;
                width: 100px;
                height: 36px;
                left: 64px;
                top:0;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: left 200ms ease-in;
                span{
                    font-size: 14px;
                    color:#fff;
                    margin-left: 10px;
                }
                &:hover{
                    left: 0px;
                }
            }

        }
        .components-box{
            margin-top: 10px;
            position: relative;
        }
        .homeMain-tabs-card{
            margin-top: -31px;
        }
        .homeMain-tabs-card-bg{
            background-color: rgba(0, 0, 0, .3);
            padding: 0 20px 20px 0;
            // 临时
            height: 328px;
        }
    }







</style>
